<template>
    <div class="shareContainer">
        <div class="shareTitle">分享至</div>
        <div flex class="shareCtrl">
            <div class="shareCtrlItem" flex="main:center cross:center dir:top" @click="share('shareAppMessage',0)">
                <img src="./images/weixin.png" class="wx"/>
                <div class="font12 opacity8">微信</div>
            </div>
            <div class="shareCtrlItem" flex="main:center cross:center dir:top" @click="share('shareTimeline',1)">
                <img src="./images/pengyouquan.png" class="pyq"/>
                <div class="font12 opacity8">朋友圈</div>
            </div>
            <div class="shareCtrlItem" flex="main:center cross:center dir:top" @click="share('shareQQ',2)">
                <img src="./images/qq.png" class="qq"/>
                <div class="font12 opacity8">QQ</div>
            </div>
        </div>
    </div>
</template>

<script>
    import API from '../api/api.js'
    const api = new API();
    export default {
        props: ['appName', 'appCode', 'imgUrl', 'shareUrl', 'id', 'role', 'ifReply'],
        data () {
            return {
                shareInfo: ''
            };
        },
        methods: {
            share(typeName, type) {
                let param = {
                    shareCode: this.appCode,
                    classId: this.$route.query.classId,
                };
                api.getShareInfo(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.shareInfo = rs;
                    }
                }).then(() => {
                    this.$util.JsBridge('shareTo', {
                        title: this.shareInfo.title,
                        imgUrl: this.imgUrl,
                        content: this.shareInfo.content,
                        shareType: typeName,
                        shareUrl: this.shareUrl ? this.shareUrl + '&type=' + type + '&role=' + this.role + this.id + '&ifReply=' + this.ifReply : this.shareInfo.shareUrl + '&type=' + type + '&role=' + this.role + this.id + '&ifReply=' + this.ifReply
                    }, (res) => {
                    })
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    .shareContainer {
        text-align: center;
        padding: 0 0.12rem;
    }

    .shareTitle {
        margin-left: -0.04rem;
        margin-top: 0.39rem;
        margin-bottom: 0.35rem;
        font-size: 0.13rem;
        font-family: PingFangSC-Medium;
    }

    .wx {
        margin-bottom: 0.17rem;
        width: 0.28rem;
    }

    .pyq {
        margin-bottom: 0.15rem;
        width: 0.26rem;
    }

    .qq {
        margin-bottom: 0.17rem;
        width: 0.22rem;
    }

    .shareCtrl {
        padding-bottom: 0.8rem;
    }

    .shareCtrlItem {
        width: 33%;
    }
</style>